<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消费记录</title>
    <style>
        body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    padding: 20px;
}

#app {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    color: #100202;
    text-align: center;
    margin-bottom: 20px;
}

label {
    margin-right: 10px;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

button {
    padding: 8px 15px;
    background-color: #f7b0de;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

button:hover {
    background-color: #fdb6d0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}

td button {
    background-color: #ff6b6b;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

td button:hover {
    background-color: #e55050;
}

p {
    text-align: right;
    font-weight: bold;
    margin-top: 20px;
}
    </style>
</head>

<body>
    <div id="app">
        <h1>消费记录</h1>
        <div>
            <label for="name">消费名称:</label>
            <input type="text" id="name" v-model="newName">
            <label for="price">消费价格:</label>
            <input type="number" id="price" v-model.number="newPrice" min="0">
            <button @click="addRecord">添加账单</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>消费名称</th>
                    <th>消费价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(record, index) in records" :key="index">
                    <td>{{index + 1}}</td>
                    <td>{{record.name}}</td>
                    <td>{{record.price}}</td>
                    <td><button @click="removeRecord(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <p>消费总计: {{total}}</p>
    </div>
</body>

</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            newName: '',
            newPrice: 0,
            records: [
                { name: '西瓜', price: 22 },
                { name: '哈密瓜', price: 30 },
                { name: '香瓜', price: 16 },
                { name: '草莓', price: 60 }
            ]
        },
        computed: {
            total: function() {
                return this.records.reduce((sum, record) => sum + record.price, 0).toFixed(2);
            }
        },
        methods: {
            addRecord: function() {
                if (this.newName && this.newPrice >= 0) {
                    this.records.push({ name: this.newName, price: this.newPrice });
                    this.newName = '';
                    this.newPrice = 0;
                } else {
                    alert('消费价格不能小于0');
                }
            },
            removeRecord: function(index) {
                this.records.splice(index, 1);
            }
        }
    });
</script>